<div class="content scrollBox">
    <div class="title">
        <h3>${icon.catagory!}</h3>
    </div>
    <form id="parameterForm" role="form" action="${base}/svg/operate/parameter/save/" method="post">
        <input type="hidden" name="id" value="${(parameter.id)!}">
        <input type="hidden" name="iconId" value="${(parameter.iconId)!}">
        <input type="hidden" name="templateId" value="${(parameter.templateId)!}">
        <#if icon.catagory=='Cameras'>
        <div class="rotate item">
            <div class="tit">
                Camera Holding
            </div>
            <div class="area">
                <div class="rotate-input">
                    <select class="form-control select2"  id="cameraHolding" name="cameraHolding">
                        <#list cameraHoldingList as obj>
                        <option <#if (obj.value)! == (parameter.cameraHolding)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                    </select>
                </div>
            </div>
        </div>
        <div class="rotate item">
            <div class="tit">
                Camera Lens
            </div>
            <div class="area">
                <div class="rotate-input">
                    <select class="form-control select2"  id="lens" name="lens">
                        <#list lensList as obj>
                        <option <#if (obj.value)! == (parameter.lens)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                        </select>
                </div>
            </div>
        </div>
        <div class="rotate item">
            <div class="tit">
                Tilt Angle
            </div>
            <div class="area">
                <div class="rotate-input">
                    <input type="text" value="${(parameter.tiltAngle)!}" class="form-control" name="tiltAngle" id="tiltAngle">
                </div>
            </div>
        </div>
        <div class="rotate item">
            <div class="tit">
                Camera ISO
            </div>
            <div class="area">
                <div class="rotate-input">
                    <select class="form-control select2"  id="iso" name="iso">
                        <#list isoList as obj>
                        <option <#if (obj.value)! == (parameter.iso)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                    </select>
                </div>
            </div>
        </div>
        <div class="rotate item">
            <div class="tit">
                Camera Aperture
            </div>
            <div class="input-block">
                <div class="rotate-input">
                    <select class="form-control select2"  id="aperture" name="aperture">
                        <#list apertureList as obj>
                        <option <#if (obj.value)! == (parameter.aperture)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                    </select>
                </div>
            </div>
        </div>
        <div class="rotate item">
            <div class="tit">
                Camera Shutter
            </div>
            <div class="input-block">
                <div class="rotate-input">
                    <select class="form-control select2"  id="shutter" name="shutter">
                    <#list shutterList as obj>
                        <option <#if (obj.value)! == (parameter.shutter)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                    </#list>
                    </select>
                </div>
            </div>
        </div>
        <div class="size item">
            <div class="tit">
                Camera Height
            </div>
            <div class="area">
                <div class="height">
                    <span>H</span>
                    <input type="text" value="${(parameter.height)!}" class="form-control" name="height" id="height">
                </div>
            </div>
        </div>
        </#if>
        <#if icon.catagory=='Backgrounds'>
        <div class="rotate item">
            <div class="tit">
                Background Color
            </div>
            <div class="input-block">
                <div class="rotate-input">
                    <input type="text" value="${(parameter.bgColor)!}" class="form-control" name="bgColor" id="bgColor">
                </div>
            </div>
        </div>
        </#if>


        <div class="Notes item">
            <div class="tit">
                Notes (Optional)
            </div>
            <div class="area">
                <div class="input-textarea">
                    <textarea placeholder="Enter notes" name="memo" id="memo">${(parameter.memo)!}</textarea>
                </div>
            </div>
        </div>
        <div class="sample item">
            <div class="tit">
                Sample Photos (Optional)
            </div>
            <div class="photos-list ">
                <div class="file">
                    <input type="file" name="file" accept="image/*" id="mainUpload" multiple="">
                    <input type="hidden" id="mainUploadImgInput"  name="profilePhoto" value="${(parameter.profilePhoto)!''}">
                    <div class="desc">
                        <div class="box">
                            <p class="t1">Click here to upload Image</p>
                            <img style="height: 100px;width: auto;" src="${base}${(parameter.profilePhoto)!''}" id="mainUploadImg" alt="" >
                        </div>
                    </div>
                </div>
                <div class="item btns g-button-wrap">
                    <button class="save-button border "  onclick="$('#parameterForm').submit();" name="save_button" id="save_button" type="button">Save</button>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function() {
        $(".scrollBox").scrollBar();
        $("#parameterForm").validate({
            submitHandler:function(form){
                submitIcon();
            }
        });
        $('#mainUpload').on('change', function(e) {
            var imgSize = this.files[0].size;
            if (imgSize > 1024 * 1024 * 20) {
                return alert("Upload images should not exceed 20M");
            };
            if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif') {
                return alert("Incorrect picture upload format");
            }
            pushImg();
        });
    });
    function submitIcon(){
        utils.HF.ajaxFormSubmit('parameterForm',function(result){
            alert("Save Suncess");
            svgCanvas.list[ svgCanvas.selectedObjectID ].parameterId=result;
            utils.closeDialog();
        },function(e){ alert("Save Failure");});
    }



    function pushImg() {
        var url = '${base}'+ "/admin/parameters/mainImgeUpload";
        var files = $("#mainUpload").get(0).files[0]; //获取file控件中的内容
        var fd = new FormData();
        fd.append("uploadFile", files);
        $.ajax({
            type: "POST",
            contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            url: url,
            data: fd,
            success: function (msg) {

                var obj = eval('(' + JSON.stringify(msg) + ')');

                if(obj.SUCESS){
                    let url =  '${base}'+obj.DATA;
                    //填充图片
                    $("#mainUploadImg").attr("src", url);
                    //写入隐藏域
                    $("#mainUploadImgInput").val(obj.DATA);
                }
            },
            error: function (msg) {
                //debugger;
                alert("error");
            }
        });
    }
</script>
